<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container">
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">James Smith</p>
<p class="text2">Founder/Director</p>
</div>
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">Maria Garcia</p>
<p class="text2">Assistant Executive</p>
</div>
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">John Jones</p>
<p class="text2">Creative Director</p>
</div>
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">Luna Lopez</p>
<p class="text2">Art Director</p>
</div>
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">Jessica Lee</p>
<p class="text2">Motion Designer</p>
</div>
<div class="block">
<div class="img"></div>
<div class="translaterContainer"><div class="translater"></div></div>
<p class="text1">Mark Brown</p>
<p class="text2">Sound Designer</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script>
<script>
var controller = new ScrollMagic.Controller();
document.querySelectorAll('.block').forEach(function(element){
console.log(element.getElementsByClassName('translater'))
var ourScene = new ScrollMagic.Scene({
triggerElement: element.getElementsByTagName('div')[0],
duration: '100%', // 90% to make it disappear at 90% of vh
triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element
reverse: true, // animate once
})
.setClassToggle(element.getElementsByClassName('translater')[0], 'translate')
.addTo(controller)
});
document.querySelectorAll('.block').forEach(function(element){
var ourScene = new ScrollMagic.Scene({
triggerElement: element.getElementsByTagName('div')[0],
duration: '100%', // 90% to make it disappear at 90% of vh
triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element
reverse: true, // animate once
})
.setClassToggle(element.getElementsByTagName('div')[0], 'appear')
.addTo(controller)
});
document.querySelectorAll('.block').forEach(function(element){
var ourScene = new ScrollMagic.Scene({
triggerElement: element.getElementsByTagName('div')[0],
duration: '100%', // 90% to make it disappear at 90% of vh
triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element
reverse: true, // animate once
})
.setClassToggle(element.getElementsByClassName('text1')[0], 'textAppear1')
.addTo(controller)
});
document.querySelectorAll('.block').forEach(function(element){
var ourScene = new ScrollMagic.Scene({
triggerElement: element.getElementsByTagName('div')[0],
duration: '100%', // 90% to make it disappear at 90% of vh
triggerHook: 0.35, // 1 will make the animation trigger when it hits the #element, 0.9 to make it trigger 10% before hitting #element
reverse: true, // animate once
})
.setClassToggle(element.getElementsByClassName('text2')[0], 'textAppear2')
.addTo(controller)
});
</script>
</body>
</html>
body{
width: 100vw;
height: 300vh;
}
.container{
width: 70%;
height: 80%;
margin: 0 auto;
}
.block{
position: relative;
width: 200px;
height: 300px;
}
.container .block:nth-child(1), .container .block:nth-child(3), .container .block:nth-child(5){
margin-left: auto;
}
.container .block:nth-child(2), .container .block:nth-child(4), .container .block:nth-child(6){
margin-right: auto;
}
.container .block:nth-child(1) .img{
background-image: url(https://i.postimg.cc/prrTDfjM/4.jpg);
}
.container .block:nth-child(2) .img{
background-image: url(https://i.postimg.cc/D0Nz5SQJ/033321112df5d5a0392082517cbe5143-model-portrait-beauty-portrait.jpg
);
}
.container .block:nth-child(3) .img{
background-image: url(https://i.postimg.cc/7Yp62TYj/39e9b39628e745a39f900dc14ee4d9a7.jpg
);
}
.container .block:nth-child(4) .img{
background-image: url(https://i.postimg.cc/qBDgpFfJ/951629-800w.jpg
);
}
.container .block:nth-child(5) .img{
background-image: url(https://i.postimg.cc/xTk88PYK/CCC-10-26-0231-MOYENNE-DEF-1.jpg
);
}
.container .block:nth-child(6) .img{
background-image: url(https://i.postimg.cc/6pnQL58q/Popular-Mens-Beard-Styles-5.jpg
);
}
.img{
opacity: 0;
width: 100%;
height: 100%;
background-size: cover;
position: relative;
}
.translaterContainer{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
top: -100%;
}
.translater{
width: 100%;
height: 100%;
background-color: black;
position: absolute;
top: 0;
left: -100%;
z-index: 1;
}
.translate{
animation: translate 0.5s ease-in;
}
.appear{
animation: opacity 0.5s linear forwards 0.5s;
}
@keyframes opacity{
to{
opacity: 1;
}
}
@keyframes translate{
to{
left: 100%;
}
}
.text1{
position: absolute;
top:70%;
font-size: calc(1.2em + 1vmin);
left: -40%;
opacity: 0;
}
.text2{
font-size: calc(0.5em + 1vmin);
position: absolute;
top: 82%;
left: -40%;
opacity: 0;
}
.textAppear1{
animation: miniTranslate 0.5s linear forwards 1.2s;
}
.textAppear2{
animation: miniTranslate 0.5s linear forwards 0.7s;
}
@keyframes miniTranslate{
to{
opacity: 1;
left: -15%;
}
}
